<h2 class="page-header-left" *ngIf="loadedInstance">Application: {{ instance.appID }}</h2>
<mat-tab-group dynamicHeight>
  <mat-tab label="Summary">
    <mat-card class="card-large mat-elevation-z8" *ngIf="loadedInstance">
      <mat-card-header>
        <mat-card-title>Summary</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table>
          <tbody>
            <tr>
              <td class="table-label">App ID</td>
              <td class="table-data">{{ instance.appID }}</td>
            </tr>
            <tr>
              <td class="table-label">App Port</td>
              <td class="table-data">{{ instance.appPort }}</td>
            </tr>
            <tr>
              <td class="table-label">Dapr HTTP Port</td>
              <td class="table-data">{{ instance.httpPort }}</td>
            </tr>
            <tr>
              <td class="table-label">Dapr gRPC Port</td>
              <td class="table-data">{{ instance.grpcPort }}</td>
            </tr>
            <tr *ngIf="metadata && metadata.extended && metadata.extended['appCommand']; else noMetadataCommand">
              <td class="table-label">Command</td>
              <td class="table-data">{{ metadata.extended['appCommand'] }}</td>
            </tr>
            <ng-template #noMetadataCommand>
              <tr *ngIf="instance.command">
                <td class="table-label">Command</td>
                <td class="table-data">{{ instance.command }}</td>
              </tr>
            </ng-template>
            <tr>
              <td class="table-label">Replicas</td>
              <td class="table-data">{{ instance.replicas }}</td>
            </tr>
            <tr>
              <td class="table-label">Address</td>
              <td class="table-data">{{ instance.address }}</td>
            </tr>
            <tr *ngIf="platform === 'standalone'">
              <td class="table-label">PID</td>
              <td class="table-data">{{ instance.pid }}</td>
            </tr>
            <tr>
              <td class="table-label">Created</td>
              <td class="table-data">{{ instance.created }}</td>
            </tr>
            <tr>
              <td class="table-label">Age</td>
              <td class="table-data">{{ instance.age }}</td>
            </tr>
          </tbody>
        </table>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab *ngIf="platform === 'kubernetes'" label="Metadata">
    <mat-card class="card-large mat-elevation-z8" *ngIf="loadedConfiguration">
      <mat-card-header>
        <mat-card-title>Metadata</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table>
          <tbody>
            <tr>
              <td class="table-label">Labels</td>
              <td class="table-data">app:{{ modelYAML.metadata.labels["app"] }}</td>
            </tr>
            <tr>
              <td class="table-label">Created</td>
              <td class="table-data">{{ modelYAML.metadata.creationTimestamp }}</td>
            </tr>
            <tr>
              <td class="table-label">Annotations</td>
              <td>
                <table>
                  <tbody>
                    <tr *ngFor="let annotation of annotations">
                      <td class="dark table-sublabel">{{ annotation }}</td>
                      <td class="table-data">{{ modelYAML.metadata.annotations[annotation] }}</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab *ngIf="platform === 'kubernetes'" label="Configuration">
    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
      <app-editor [(model)]="model"></app-editor>
    </mat-card>
  </mat-tab>
  <mat-tab label="Actors">
    <mat-card class="card-large mat-elevation-z8">
      <mat-card-header>
        <mat-card-title>Actors</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table *ngIf="metadata && metadata.actors && metadata.actors.length > 0; else noActors">
          <tbody>
            <tr *ngFor="let item of metadata.actors">
              <td class="table-label">{{ item.type }}</td>
              <td class="table-data">{{ item.count }}</td>
            </tr>
          </tbody>
        </table>
        <ng-template #noActors>
          <p class="page-text">No registered Dapr Actors</p>
        </ng-template>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Components">
    <mat-card class="card-large mat-elevation-z8">
      <mat-card-header>
        <mat-card-title>Components</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table *ngIf="metadata && metadata.components && metadata.components.length > 0; else noComponents">
          <thead>
            <th>Name</th>
            <th>Type</th>
            <th>Version</th>
            <th>Capabilities</th>
          </thead>
          <tbody>
            <tr *ngFor="let item of metadata.components">
              <td class="table-label">{{ item.name }}</td>
              <td class="table-data">{{ item.type }}</td>
              <td class="table-data">{{ item.version }}</td>
              <td class="table-data">
                <span *ngFor="let capability of item.capabilities">{{ capability }}<br /></span>
              </td>
            </tr>
          </tbody>
        </table>
        <ng-template #noComponents>
          <p class="page-text">No registered Dapr Components</p>
        </ng-template>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Subscriptions">
    <mat-card class="card-large mat-elevation-z8">
      <mat-card-header>
        <mat-card-title>Subscriptions</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table *ngIf="metadata && metadata.subscriptions && metadata.subscriptions.length > 0; else noSubscriptions">
          <thead>
            <th>Pubsubname</th>
            <th>Topic</th>
            <th>Dead letter topic</th>
            <th>Metadata</th>
          </thead>
          <tbody>
            <tr *ngFor="let item of metadata.subscriptions">
              <td class="table-label">{{ item.pubsubName }}</td>
              <td class="table-data">{{ item.topic }}</td>
              <td class="table-data">{{ item.deadLetterTopic }}</td>
              <td class="table-data">
                <table *ngIf="item.metadata">
                  <tbody>
                    <tr *ngFor="let metaItem of item.metadata | keyvalue">
                      <td class="table-label">{{ metaItem.key }}</td>
                      <td class="table-data">{{ metaItem.value }}</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="table-data">
                <table *ngIf="item.rules">
                  <thead>
                    <th>Match</th>
                    <th>Path</th>
                  </thead>
                  <tbody>
                    <tr *ngFor="let rule of item.rules">
                      <td class="table-data">{{rule.match}}</td>
                      <td class="table-data">{{rule.path}}</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <ng-template #noSubscriptions>
          <p class="page-text">No registered Dapr Subscriptions</p>
        </ng-template>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab *ngIf="platform === 'kubernetes'" label="Logs">
    <app-logs></app-logs>
  </mat-tab>
</mat-tab-group>
